<template>
  <div>
    <el-dialog
      :visible.sync="remarkVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      append-to-body
      width="1020px"
    >
      <div slot="title" class="title-p">用户列表</div>
      <div class="tabContent-box">
        <el-checkbox-group v-model="userId">
          <el-checkbox
            class="vm-checkbox"
            v-for="(item, index) in pictureArr"
            :key="index"
            :value="item"
            :label="item"
          >
            <template>
              <div class="content-box">
                <div class="img-text">
                  <div class="content-img">
                    <img :src="item.head_img" alt="" class="img-a" />
                  </div>
                  <div class="content-text">
                    <p class="text-p2">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="微信昵称"
                        placement="top"
                      >
                        <span>{{ item.nickname }}</span>
                      </el-tooltip>
                    </p>
                    <p class="text-p2">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="读者证号"
                        placement="top"
                      >
                        <span>{{ item.account }}</span>
                      </el-tooltip>
                    </p>
                    <p class="text-p2">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="读者证姓名"
                        placement="top"
                      >
                        <span>{{ item.username }}</span>
                      </el-tooltip>
                    </p>
                  </div>
                </div>
              </div>
            </template>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="btn-boxs">
        <el-button class="zhi-btn" @click="determineBtn()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RemarksPopup',
  props: {},
  data() {
    return {
      remarkVisible: false,
      act_id: '',
      pictureArr: [],
      userId: [],
      appoint_userArr: []
    }
  },
  methods: {
    // 父组件触发的方法
    showModal(functionName) {
      this.userId = []
      this.remarkVisible = true
      this.pictureArr = functionName.pictureArr
      this.appoint_userArr = functionName.appoint_userArr
    },
    determineBtn() {
      this.$emit('userAdd', this.userId)
      this.remarkVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.title-p {
  font-size: 18px;
  color: #00a9b0;
}

.content-box {
  display: flex;
  justify-content: space-between;
  width: 200px;
  height: 85px;
  background: #fafafa;
  border-radius: 5px;
  margin-bottom: 10px;
  .img-text {
    display: flex;
    .content-img {
      width: 55px;
      height: 55px;
      border-radius: 5px;
      overflow: hidden;
      margin: 15px 8px;
      .img-a {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .content-text {
      font-size: 12px;
      margin-top: 15px;
      .text-p2 {
        color: #999999;
        > span:hover {
          color: #00a9b0;
        }
      }
      > p {
        width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .del-p {
    color: #df5146;
    font-size: 14px;
    cursor: pointer;
    margin-right: 20px;
    margin-top: 20px;
  }
}
.tabContent-box {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  overflow: auto;
}
/deep/.el-checkbox__input {
  position: absolute;
  right: 8px;
  top: 39%;
}
.btn-boxs {
  text-align: right;
  .zhi-btn {
    background-color: #00a9b0;
    color: #ffffff;
    margin-left: 10px;
  }
}
</style>